@import "./common";

section{
    .container{
        >p{
            font-size: 30px;
            color: #ff6b08;
            margin: 40px 0;
        }
        .row{
            margin-bottom: 87px;
            .news{
                position: relative;
                border: 1px solid #eeeeee;
                img{
                    width: 100%;
                }
                .newword{
                    display: flex;
                    display: -webkit-flex;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    height: 20%;
                    width: 100%;
                    background-color: rgba(0,0,0,0.5);
                    
                    p{
                        font-size: 14px;
                        color: white;
                        text-align: center;
                        margin: 0;
                    }
                }
            }
        }
    }
}

.newbottom{
    background-color: white;
    .container{
        .row{
            margin-bottom: 38px;
            .newimg{
                border: 1px solid #dddddd;
                padding: 3%;
                img{
                    width: 100%;
                }
            }

            .newcontent{
                p{
                    &:nth-of-type(1){
                        font-size: 18px;
                        color: #666666;
                    }
                    &:nth-of-type(2){
                        font-size: 14px;
                        color: #2a2a2a;
                    }
                    &:nth-of-type(3){
                        font-size: 14px;
                        color: #2a2a2a;
                    }
                }
                #active1{
                    color: #ff6900;
                }

                .newbutton{
                    text-align: right;
                    button{
                        border: 1px solid #ff6900;
                        color: #ff6900;
                        border-radius: 20px;
                        background-color: white;
                        width: 13%;
                        height: 32px;
                    }

                    .active2{
                        background-color: #ff6900;
                        color: white;
                    }
                }
            }
        }

        .first{

            ul{
                display: flex;
                display: -webkit-flex;
                justify-content: center;
                padding-top: 35px;
                border-top: 1px dashed #dddddd;
                margin-bottom: 25px;
                li{
                    font-size: 12px;
                    width: 30px;
                    height: 30px;
                    border: 1px solid #dddddd;
                    margin-left: -1px;
                    text-align: center;
                    line-height: 30px;

                    &:nth-of-type(1){
                        width: 50px;
                    }
                    &:nth-of-type(2){
                        width: 60px;
                    }
                    &:nth-of-type(7){
                        width: 60px;
                    }
                    &:nth-of-type(3){
                        background-color: #e34637;
                        color: white;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:992px){
    section{
        .container{
            .row{
                margin-bottom: 60px;
                .news{
                    .newword{
                        height: 28%;
                        p{
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }

    .newbottom{
        .container{
            .row{
                .newcontent{
                    p{
                        &:nth-of-type(1){
                            font-size: 14px;
                            color: #666666;
                        }
                        &:nth-of-type(2){
                            font-size: 12px;
                            color: #2a2a2a;
                        }
                        &:nth-of-type(3){
                            font-size: 12px;
                            color: #2a2a2a;
                        }
                    }
                    #active1{
                        color: #ff6900;
                    }
                    .newbutton{
                        button{
                            width: 100px;
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
}

@media screen and (max-width:767px){
    section{
        .container{
            .row{
                .news{
                    margin-bottom: 15px;
                    .newword{
                        height: 20%;
                        p{
                            font-size: 14px;
                        }
                    }
                }
            }
        }
    }
}